<template>
  <div class="side-left z">
    <div class="m-auto">
      <img class="mx-auto mb-2 mt-2" src="@/assets/images/logo1.png" alt="" />
    </div>
    <div class="side-left-down">
      <n-menu
        :options="menuOptions"
        @update:value="handleUpdateValue"
        inverted
        :value="defaultkey"
      />
    </div>
  </div>
</template>
<script lang="ts" setup>
import { useRouter } from "vue-router";
import { renderIcon } from "@/utils";
import {
  CalendarClearOutline,
  DocumentSharp,
  BookmarksSharp,
  AppsSharp,
  Cube,
  Menu,
  PaperPlane,
  PersonSharp,
} from "@vicons/ionicons5";
import { getPowerNav } from "@/api/menu";
import { reactive,ref } from "vue";
const menuOptions: any = reactive([]);
const params:any = reactive({
  str:'',
});
const menu = reactive({
  data: [],
});
const icons = [
  CalendarClearOutline,
  DocumentSharp,
  BookmarksSharp,
  AppsSharp,
  Cube,
  Menu,
  PaperPlane,
  PersonSharp,
];
const router = useRouter();
const init = () => {
  params.str = localStorage.getItem('uPower')
  // console.log(params)
  getPowerNav(params).then((res: any) => {
    // console.log(res)
  menu.data = res.data;
  menu.data.forEach((item: any, key:any) => {
    menuOptions.push({
      label: item.nName,
      key: `${item.nUrl}_list`,
      icon: renderIcon(icons[key]),
    });
  });
  // console.log(menuOptions[0].key)
    router.push({ name: menuOptions[0].key })
  });
}
init()
const defaultkey=ref('')
const handleUpdateValue = (key: any, item: any) => {
  router.push({ name: key });
  // console.log()
  defaultkey.value=key
};
</script>

<style scoped lang="scss">
.z {
  z-index: 9;
}
.img {
  height: 12vh;
}
</style>
